<template>
<div class="video-list">
    <!-- video player -->
    <Modal
        :title="videoTitle"
        v-model="isOpenVideo"
        width="960"
        :transfer="true"
        :styles="{top: '0'}"
        :footer-hide="true"
        class-name="vertical-center-modal"
        @on-cancel="handleModalClose">
        <common-video :sources="videoSource" :poster="videoPoster" :state="videoStatus"></common-video>
    </Modal>
    <Row :gutter="30">
        <Col :xs="24" :sm="12" :md="8" v-for="(item, index) in this.$t('video')" :key="item.title">
            <div class="video-item">
                <div class="video-img">
                    <img src="../../assets/images/img4.jpg" :alt="item.title" @click="handleOpenVideo(index)"/>
                    <Icon type="ios-arrow-dropright-circle" class="video-icon" 
                          size="50" color="#fff"
                          @click="handleOpenVideo(index)"
                    />
                </div>
                <h2> {{item.title}} </h2>
            </div>
        </Col>
    </Row>
</div>
</template>
<script>
import CommonVideo from "@/views/common/Video";

    export default {
        name: "CommonVideoList",
         components: {
            CommonVideo
        },
        data () {
            return {
                isOpenVideo: false,
                videoSource: "./static/video/oceans.mp4", //url地址
                videoPoster: "https://puui.qpic.cn/qqvideo_ori/0/j07219qkiqd_496_280/0",
                videoTitle: "",
                videoStatus: false
            }
        },
        methods: {
            handleOpenVideo: function(index){
                this.videoSource = this.$t('video')[index].url;
                this.videoPoster = this.$t('video')[index].poster || "https://puui.qpic.cn/qqvideo_ori/0/j07219qkiqd_496_280";
                this.videoTitle = this.$t('video')[index].title;
                this.isOpenVideo = true
            },
            handleModalClose: function(){
                this.videoStatus = Math.random();//改变状态暂停播放
            }
        },
        computed: {
           
        },
        mounted(){
        }
    }
</script>

<!-- 深度修改样式?? -->
<style>
.vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center; 
}
.ivu-modal{
    top: 0;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.video-item{
    height: 300px;
    background: $aColor;
    text-align: center;
    overflow: hidden;
    margin-bottom: .5rem;
    .video-img{
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            min-width: 100%;
            min-height: 220px;
            margin: 0 auto;
            transition: all 0.6s linear;
            &:hover{
                transform: scale(1.2);
            }
        }
        .video-icon{
            position: absolute;
            cursor: pointer;
            transition: all 0.1s linear;
            &:hover{
                transform: scale(1.2);
            }
        }       
    }
    h2{
        padding: 0;
        margin: .3rem;
        height: 50px;
        overflow: hidden;
    }  
}


</style>
